<template>
    <div>
<!--        <div class="city-list">-->
<!--            <ul>-->
<!--              <li v-for="(v,k) in Object.keys(list).sort()">-->
<!--                {{v}}-->
<!--              </li>-->
<!--            </ul>-->
<!--        </div>-->
      <ul class="list">
        <li class="item" v-for="item in letters" :key="item" :ref="item"
            @click = "handleLetterClick()"
            @touchstart.prevent = "handleTouchStart"
            @touchmove.prevent = "handleTouchMove"
            @touchend.prevent = "handleTouchEnd"
        >

          {{item}}
        </li>

      </ul>
    </div>
</template>

<script>
  import axios from "axios"
    export default {
        name: "city-list",
      data(){
          return{
            list:[],
            touchStatus:false,
            startY:0,
            timer:null
          }
      },
      mounted() {
        axios.get("/static/data/city.json").then((res)=>{
          this.list=res.data.data.cities
        })
      },
      updated() {
        this.startY = this.$refs['A'][0].offsetTop
      },
      methods:{
        handleLetterClick(e,item){

          this.$emit("change",e.target.innerText)//发送
        },
        handleTouchStart(){
              this.touchStatus=true

        },
        handleTouchMove(e){
          if(this.timer){
            clearTimeout(this.timer)
          }
          console.log(e)
          if (this.touchStatus) {
            //A字符距离顶部的距离
            const startY = this.$refs["A"][0].offsetTop
            console.log(startY)
            //所触控区距离最顶部距离e.touches[0].clientY   79为量出来量出来header高43+search高为36
            const touchY =e.touches[0].clientY - 79
            console.log(touchY)
            // index触控位置的下标   20量为字符的高度
            const index =Math.floor( (touchY - this.startY)/20)
            console.log(index)
            if (index >= 0 && index < this.letters.length ) {
              this.$emit("change", this.letters[index])
            }
          }
        },
        handleTouchEnd(){
          this.touchStatus=false

        }
      },
      computed:{
          letters(){
            const letters=[]
            for(let i in this.list){
              letters.push(i)
            }
            return letters
          }
      }
    }
</script>

<style lang="stylus" scoped>
  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .44rem
    // background :red
    .item
      line-height: .4rem
      text-align: center
      color: $bgColor

</style>
